<template>
  <div>
    <div class="j-brief">
      <router-link to="/society" tag="a" class="active">{{zannueBrief[0]}}</router-link>
      <router-link to="/school" tag="a">{{zannueBrief[1]}}</router-link>
    </div>
    <div class="title" v-if="isVisibly">
      <h1>{{zannueBrief[0]}}</h1>
    </div>
    <div style="width: 1200px;margin: 0 auto" v-if="isVisibly">
      <div class="menu">
        <div class="choose">
          <el-select v-model="value" placeholder="请选择" @change="search">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id">
            </el-option>
          </el-select>
        </div>
        <!-- <el-button type="primary" style="margin-left: 60px;" :class="{ban: !!isBan1}">
          <a :href="Raddress1" target="_blank" style="color: #fff;text-decoration: none;display: block;width: 98px;height: 40px">智联招聘</a>
        </el-button>
        <el-button type="success" style="margin-left: 60px;display: block;width: 98px;height: 40px" :class="{ban: !!isBan2}">
          <a :href="Raddress2" target="_blank" style="color: #fff;text-decoration: none;display: block;width: 98px;height: 40px">51招聘</a>
        </el-button> -->
        <el-button type="primary" style="margin-left: 60px;background-color: #00ae66;border-color: #00ae66;display: block;width: 98px;height: 40px" v-if="false">
          <a href="javascript:void(0)" :title="email" style="color: #fff;text-decoration: none;">招聘邮箱</a>
        </el-button>
        <span v-if="!!email" style="margin-left: 60px;color: #303133;line-height: 40px">招聘邮箱: {{email}}</span>
      </div>
      <el-collapse v-model="activeNames" accordion>
        <el-collapse-item :title="job.post_title" :name="job.id" v-for="job in jobLists" :key="job.id">
          <div class="main-jiesao">
            <div style="margin-bottom: 33px">
              <h3 >岗位职责</h3>
              <p v-html="job.post_zhize"></p>
              <h3 style="margin-top: 69px;margin-bottom: 33px">任职要求</h3>
              <p v-html="job.post_excerpt"></p>
            </div>
            <!-- <el-button type="primary">
              <a :href="job.post_dizhi" style="color: #fff;text-decoration: none;">投递简历</a>
            </el-button> -->
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <div style="display:flex;justify-content: center;margin: 0 auto;margin-top: 66px;width: 486px;" v-if="isVisibly">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="8"
        @current-change="handleCurrentChanges"
        >
      </el-pagination>
    </div>
    <p class="no" v-if="!isVisibly">To be updated</p>
  </div>
</template>

<script>
import vNav from '@/components/nav.vue'
import banner from '@/components/banner.vue'
import {mapGetters} from 'vuex'
import { getJobData, getJobListData } from '@/services/api.js'
export default {
  name: 'product',
  data () {
    return {
      tableData: [
        {
          name: '成都中医药大学',
          xinshi: '考场会',
          data: '10月16日',
          time: '14:00-17:00',
          address: '待定'
        },
        {
          name: '成都中医药大学',
          xinshi: '考场会',
          data: '10月16日',
          time: '14:00-17:00',
          address: '待定'
        },
        {
          name: '成都中医药大学',
          xinshi: '考场会',
          data: '10月16日',
          time: '14:00-17:00',
          address: '待定'
        },
        {
          name: '成都中医药大学',
          xinshi: '考场会',
          data: '10月16日',
          time: '14:00-17:00',
          address: '待定'
        }
      ],
      options: [],
      value: '',
      activeNames: ['0'],
      restaurants: [],
      state1: '',
      state2: '',
      jobLists: null,
      isShow: false,
      page: 1,
      total: null,
      id: null,
      Raddress1: null,
      Raddress2: null,
      email: null,
      isVisibly: false,
      isBan1: false,
      isBan2: false
    }
  },
  computed: {
    ...mapGetters({
      'lang': 'lang',
      'zannueBrief': 'zannueBrief'
    })
  },
  components: {
    vNav,
    banner
  },
  methods: {
    _getChList () {
      getJobData().then((res) => {
        console.log(res)
        this.options = res.list
        this.jobLists = res.data.data
        this.value = res.list[0].id
        this.id = res.list[0].id
        this.total = res.data.total
        this.Raddress1 = res.zl
        this.Raddress2 = res.job
        this.email = res.email
        if (!res.zl) {
          this.Raddress1 = 'javascript:void(0)'
          this.isBan1 = true
        } else {
          this.isBan1 = false
        }
        if (!res.job) {
          this.Raddress2 = 'javascript:void(0)'
          this.isBan2 = true
        } else {
          this.isBan2= false
        }
      })
    },
    version () {
      if (this.lang === 1) {
        this._getChList()
        this.isVisibly = true
      }
      if (this.lang === 2) {
        // this._getEnList()
        this.isVisibly = false
      }
    },
    search (res) {
      this.id = res
      this.page = 1
      let params = {
        id: this.id,
        num: 8,
        page: this.page
      }
      getJobListData(params).then((res) => {
        console.log(res)
        if (!res) {
          this.jobLists = []
          this.isShow = true
        } else {
          this.jobLists = res.data.data
          this.total = res.data.total
          this.Raddress1 = res.zl
          this.Raddress2 = res.job
          this.email = res.email
          if (!this.Raddress1) {
            this.Raddress1 = 'javascript:void(0)'
            this.isBan1 = true
          } else {
            this.isBan1 = false
          }
          if (!this.Raddress2) {
            this.Raddress2 = 'javascript:void(0)'
            this.isBan2 = true
          } else {
            this.isBan2 = false
          }
        }
      })
    },
    handleCurrentChanges (val) {
      this.page = val
      let params = {
        id: this.id,
        num: 8,
        page: this.page
      }
      getJobListData(params).then((res) => {
        console.log(res)
        if (!res) {
          this.jobLists = []
          this.isShow = true
        } else {
          this.jobLists = res.data.data
          this.total = res.data.total
          this.Raddress1 = res.zl
          this.Raddress2 = res.job
          this.email = res.email
          if (!res.zl) {
            this.Raddress1 = 'javascript:void(0)'
            this.isBan1 = true
          } else {
            this.isBan1 = false
          }
          if (!res.job) {
            this.Raddress2 = 'javascript:void(0)'
            this.isBan2 = true
          } else {
            this.isBan2 = false
          }
        }
      })
    }
  },
  watch: {
    lang (newVal, oldVal) {
      if (newVal === 1) {
        this.isVisibly = true
      }
      if (newVal === 2) {
        this.isVisibly = false
        // this.$router.push('/school')
      }
    }
  },
  created () {
    this.version()
    window.scrollTo(0, 0)
  }
}
</script>

<style scoped lang="scss">
  .el-button {
    padding: 0;
    width: 98px;
    height: 40px;
    text-align: center;
    line-height: 40px
  }
  .el-button--success {
    background-color: #ff6000;
    border-color: #ff6000;
  }
  .no {
    text-align: center;
    margin: 60px 0;
    color: #666;
  }
  .ban {
    background-color: #ccc;
    border-color: #ccc
  }
  .ban:hover {
    background-color: #ccc;
    border-color: #ccc;
    cursor: auto
  }
  .ban:hover  a {
    cursor: auto
  }
  .active {
    color: #2154b9!important
  }
  .active:hover {
    color: #fff!important;
  }
  .el-table tr {
    background-color: red
  }
  .menu {
    margin-bottom: 60px;
    display: flex;
    position: relative;
    .aniu {
      width: 60px;
      height: 50px;
      background-color: #2053b9;
      border-radius: 6px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: 0;
      top: 0;
      cursor: pointer
    }
  }
  .title {
    width: 1200px;
    margin: 0 auto;
    margin-top: 60px;
    margin-bottom: 83px;
    h1 {
      font-size: 32px;
      line-height: 48px;
      letter-spacing: 3px;
      color: #333333;
    }
  }
  .el-dropdown {
    vertical-align: top;
  }
  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .main-jiesao {
    padding: 30px;
    background-color: #f5f5f5;
    position: relative;
    div {
      margin-bottom: 30px;
      h3 {
        font-size: 20px;
        color: #333333;
      }
      p {
        font-size: 14px;
        color: #666;
      }
    }
  }
  .lc {
    height: 174px;
    background-color: #f5f5f5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 68px;
    p, span {
      font-size: 16px;
      letter-spacing: 1px;
      color: #4d4d4d;
      line-height: 30px
    }
    span {
      margin-top: 20px
    }
  }
</style>
